<template>
  <div
    id="echart"
    class="echart_container"
    ref="echart"
    :style="containerStyle"
  ></div>
</template>
<script>
// echarts 按需引入
import * as echarts from "echarts/core";
import {
  TitleComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import { BarChart, PieChart,LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  BarChart,
  PieChart,
  LineChart,
  CanvasRenderer,
]);

export default {
  name: "echartPie",
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      // element: null,
      // options: {
      //   title: {
      //     text: "征收面积",
      //   },
      //   tooltip: {
      //     trigger: "item",
      //   },
      //   legend: {
      //     top: "80%",
      //     left: "center",
      //   },
      //   series: [
      //     {
      //       name: "Access From",
      //       type: "pie",
      //       radius: ["20%", "60%"],
      //       avoidLabelOverlap: false,
      //       label: {
      //         show: false,
      //         position: "center",
      //       },
      //       emphasis: {
      //         label: {
      //           show: true,
      //           fontSize: "40",
      //           fontWeight: "bold",
      //         },
      //       },
      //       labelLine: {
      //         show: false,
      //       },
      //       data: [
      //         { value: 1048, name: "Search Engine" },
      //         { value: 735, name: "Direct" },
      //         { value: 580, name: "Email" },
      //         { value: 484, name: "Union Ads" },
      //         { value: 300, name: "Video Ads" },
      //       ],
      //     },
      //   ],
      // },
      containerStyle: { width: "400px", height: "280px" },
    };
  },
  mounted() {
    this.element = this.$refs.echart;
    this.initCharts(this.element, this.options);
  },
  methods: {
    initCharts(element, options) {
      // 初始化echarts实例
      var myChart = echarts.init(element);
      // 绘制图表
      myChart.setOption(options);
    },
  },
};
</script>
<style scoped>
.echart_container {
  /* width: 576px;
  height: 280px; */
  margin: 0 auto;
  overflow: hidden;
}
</style>